*{ margin: 0; padding: 0; font-family: "microsoft yahei";}
body{ font-size:12px; color: #333; background: #f2f2f2;}
ul,li{ list-style: none;}
input[type="button"]{ cursor: pointer;outline: none; -webkit-appearance: none;}
input[type="text"],input[type="number"],input[type="month"],input[type="date"]{ outline: none;  -webkit-appearance: none; }
select {outline: none;}
a {text-decoration: none; }
* {
  /* scrollbar-width: thin; */
}
*::-webkit-scrollbar {
  width: 3px;
  height: 10px;
}
*::-webkit-scrollbar-thumb {
  background: rgb(200, 200, 200);
  border-radius: 3px;
}

.main {position: fixed;top: 20px;left: 20px;bottom: 20px;right: 20px;background: #fff;border-radius: 10px;border: 1px solid #dfe2ea;box-shadow: 0 0 20px #dfe2ea;}
.lf {width: 300px;border-right: 1px solid #ddd;position: absolute;top: 0;left: 0;bottom: 0; /* 定位context */
  transform: translateX(0); /* 初始状态，侧边栏在初始位置 */
  transition: transform 1s, opacity 1s; /* 动画过渡效果 */
  opacity: 1; /* 初始状态，侧边栏完全可见 */}
.lf-hidden {
  transform: translateX(-100%); /* 隐藏时，侧边栏移动到左侧100%的宽度 */
  opacity: 0; /* 隐藏时，侧边栏不可见 */
}
.lf-logo {padding: 0 20px;box-sizing: border-box;display: flex;align-items: center;justify-content: flex-start;height: 60px;}
.lf-logo img {height: 30px;margin-right: 10px;}
.lf-logo p {font-size: 16px;font-weight: 600;color: #333;}
.dialog-lf {position: absolute;top: 80px;left: 20px;right: 20px;bottom: 20px;;}
.dialog-but {display: flex;align-items: center;justify-content: space-between;width: 100%;}
.dialog-but .set-up {line-height: 35px;font-size: 14px;color: #086de9;border-radius: 100px;border: 1px solid #dfe2ea;width: 205px;background: #fff url(../images/dialog1.png) 70px center no-repeat;background-size: 14px;padding-left: 20px;box-sizing: border-box;}
.dialog-but .set-up:hover {background: #edf5ff url(../images/dialog1.png) 70px center no-repeat!important;background-size: 14px!important;border: 1px solid #086de9!important;}
.dialog-but .clean {width: 35px;height: 35px;border-radius: 100px;border: 1px solid #dfe2ea;background: #fff url(../images/clean.png) center no-repeat;background-size: 14px;}
.dialog-but .clean:hover {border: 1px solid #ff5151!important;background: #ffeded url(../images/clean.png) center no-repeat!important;background-size: 14px!important;}
.dialog-list {width: 100%;margin-top: 10px;overflow: auto; height: 100%;}
.dialog-list ul{overflow: auto; height: 100%;}
.dialog-list li {width: 100%;padding: 10px 15px;box-sizing: border-box;border-radius: 10px;margin: 5px 0;background: #fff;display: flex;align-items: center;justify-content: flex-start;color: #333;}
.dialog-list li i {width: 12px;height: 12px;display: block;background: url(../images/dialog3.png) center no-repeat;background-size: 100%;margin-right: 10px;}
.dialog-list li p {font-size: 12px;}
.dialog-list-click {background: #edf5ff!important;color: #086de9!important;}
.dialog-list-click i {background: url(../images/dialog2.png) center no-repeat!important;background-size: 100%!important;}
.dialog-list li:hover {background: #edf5ff!important;color: #086de9!important;}
.dialog-list li:hover i {background: url(../images/dialog2.png) center no-repeat!important;background-size: 100%!important;}


.rt {border-right: 1px solid #ddd;position: absolute;top: 0;right: 0;bottom: 0;left: 301px; transition: left 1s;}
.rts { left: 0;}
.rt-tit {border-bottom: 1px solid #ddd;display: flex;align-items: center;justify-content: space-between;height: 60px;padding: 0 20px;box-sizing: border-box;}
.rt-tit-at {font-size: 14px;color: #333;font-weight: 600;display: flex;align-items: center;justify-content: flex-start;}
.rt-tit-at .record {background: #edf5ff;color: #086de9;font-size: 10px;font-weight: 400;line-height: 28px;margin-left: 10px;border-radius: 5px;padding: 0 10px;box-sizing: border-box;display: flex;align-items: center;justify-content: center;}
.rt-tit-at .record img {height: 12px;margin-right: 5px;}
.more {width: 28px;height: 28px;border-radius: 5px;border: 1px solid #ddd;display: block;background: url(../images/more.png) center no-repeat;background-size: 12px;}

.talk {position: absolute;top: 60px;bottom: 100px;left: 0;right: 0;overflow: auto;padding: 20px;box-sizing: border-box;}
.talk ul li {width: 100%;}


.talk-lf,.talk-lf .head {display: flex;align-items: center;justify-content: flex-start;}
.talk-rt,.talk-rt .head {display: flex;align-items: center;justify-content: flex-end;}

.head span {width: 30px;height: 30px;display: block;border-radius: 5px;background: #fff;border: 1px solid #ddd;}
.head span img {width: 24px;margin: 3px auto;display: block;}
.fun {display: flex;align-items: center;}
.fun a {width: 22px;height: 22px;display: inline-block;border: 1px solid #ddd; cursor: pointer;}
.fun a img {width: 12px;margin: 6px auto;display: block;}
.talk-cont {margin: 10px 0 20px;padding: 15px;box-sizing: border-box;font-size: 12px;color: #333;background: #f7f8fa;border-radius: 0 10px 10px 10px;box-shadow: 0 0 15px #ddd;display: inline-block;}

.talk-rt .talk-cont {float: right;border-radius: 10px 0 10px 10px;}
.talk-rt .head {justify-content: flex-end;}
.talk-rt .head span {margin-left: 10px;}
.talk-lf .head span {margin-right: 10px;}
.talk-rt .talk-cont {background: #edf5ff;}

.talk-but {width: 600px;border-radius: 10px;padding: 10px;box-sizing: border-box;box-shadow: 0 0 20px #ddd;display: flex;align-items: center;justify-content: space-between;background: #fff;position: absolute;left: 50%;bottom: 0;transform: translate(-50%,-50%);}
.talk-but input[type="text"] {width: 90%;border: none;font-size: 14px;}
.talk-but input[type="button"] {width: 30px;height: 30px;border-radius: 5px;background: #e5e5e5 url(../images/sending.png) center no-repeat;background-size: 16px;border: none;}
.search-btn {background-color: #086de9 !important;}

.indent {position: absolute;left: -1px;top: 50%;transform: translate(0,-50%);width: 13px;height: 60px;border-radius: 0 10px 10px 0;background: rgba(0,0,0,.6) url(../images/indent.png) center no-repeat;background-size: 6px; transition: left 1.5s;}
.indents {position: fixed;left: 20px;top: 50%;transform: translate(0,-50%);width: 13px;height: 60px;border-radius: 0 10px 10px 0;background: rgba(0,0,0,.6) url(../images/indent.png) center no-repeat;background-size: 6px; display: none; transition: left 1.5s;}
.indent1 {left: -1px;}
.indents1{left: 300px;}

.popup {width: 100%;height: 100%;position: fixed;top: 0;background: rgba(0,0,0,.4);z-index: 9999; display: none;}
.warn {width: 320px;border-radius:10px;background: #fff;padding: 20px;box-sizing: border-box;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.warn-at {display: flex;align-items: flex-start;justify-content: flex-start;margin: 20px 0 30px;}
.warn-at img {width: 20px;margin-right: 10px;}
.warn-at p {font-size: 14px;color: #333;}
.popup-but {display: flex;align-items: center;justify-content: center;width: 100%;}
.popup-but input {padding: 0 30px;box-sizing: border-box;border-radius: 5px;font-size: 16px;color: #999;border: none;line-height: 40px;margin: 0 20px;background: #eee;}
.popup-but .but-click {background: #1890ff!important;color: #fff!important;}








